import GUI from 'lil-gui';
import { WORDS } from './model/WORDS.js';

export default class GUIController {
	gui: GUI
	constructor(container: string) {
		const dom = document.getElementById(container)
		if (!dom) {
			throw new Error(`${WORDS.ERROR.NONE_CONTAINER}:${container}`);
		}
		this.gui = new GUI({
			container: dom
		});

		this.setTitle('')
		this.gui.close()

		// const myObject = {
		// 	myBoolean: true,
		// 	myFunction: function () { },
		// 	myString: 'lil-gui',
		// 	myNumber: 1
		// };

		// this.gui.add(myObject, 'myBoolean');  // Checkbox
		// this.gui.add(myObject, 'myFunction'); // Button
		// this.gui.add(myObject, 'myString');   // Text Field
		// this.gui.add(myObject, 'myNumber');   // Number Field
	}

	setTitle(title: string) {
		this.gui.title(title)
		title === '' ? this.gui.close() : this.gui.open()
	}

	addNumCtl(object: Object, name: string, min: number, max: number, step = 1) {
		this.gui.add(object, name, min, max, step);  // number
	}

	addStrCtl(object: Object, name: string) {
		this.gui.add(object, name);  // 字符串
	}

	addTextCtl(object: Object, name: string, callback: (content: string) => void) {
		const ctl = this.gui.add(object, name);  // 字符串
		ctl.onChange(callback)
	}

	addColorCtl(object: Object, name: string) {
		this.gui.addColor(object, name);  // color
	}
}

